<template>
	<div class="page">
		<div class="box">
			<img class="box-img" src="//via.placeholder.com/100"/>
			<div class="box-con">
				<div class="box-name">
					绝缘手套
				</div>
				<div class="box-row">
					<div class="left" :class="{'active1':active===1}" @click="tabSwitch(1)">
						<img class="ico kucun" src="../../img/kucun.png"/>
						<span>库存(100)</span>
					</div>
					
					<div class="cancel" :class="{'active2':active===2}" @click="tabSwitch(2)">
						<img class="ico baofei" src="../../img/baofei.png" />
						<span>报废(100)</span>
					</div>

					<div class="use" :class="{'active3':active===3}" @click="tabSwitch(3)">
						<img class="ico lingyong" src="../../img/communication.png" />
						<span>领用(100)</span>
					</div>
				</div>
				<!-- <div class="box-row">
					
				</div> -->
			</div>
		</div>
		<div class="list">
			<div class="item" v-for="item in list" :key="item">
				<div class="header">
					<div class="name">
						<span>绝缘手套</span>
						<img class="ico biaoshi" src="../../img/biaoshi.png"/>
					</div>
					<div class="operation">
						<div class="btn face" @click="toFace">
							外观
						</div>
						<div class="btn all" @click="toAll">
							全流程
						</div>
					</div>
				</div>
				<div class="item-row">
					<div class="item-col">
						名称：xxxx
					</div>
					<div class="item-col">
						型号：xxxx11
					</div>
					<div class="item-col">
						厂家：xxxxxxx
					</div>
				</div>
				<div class="item-row">
					<div class="item-col">
						出厂日期：20190812
					</div>
					<div class="item-col">
						上次检测：xxx
					</div>
				</div>
				<div class="item-row">
					<div class="item-col">
						有效期：xxx
					</div>
				</div>
				<div class="checked">
					已检查
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: 9,
				active:1
			}
		},
		methods: {
			toFace() {
				this.$router.push("/facade")
			},
			toAll() {
				this.$router.push("/allflow")
			},
			tabSwitch(n) {
				this.active = n
			},
			
		}
	}
</script>

<style lang="less">
.page {
  height: 100%;
	width: 100%;
	overflow: hidden;
.box {
	margin:20px 10px 0 10px;
	border-radius: 15px;
	background: #FFFFFF;
	height: 150px;
	display: flex;
}
.box-img {
	width: 90px;
	height: 90px;
	margin: 0 10px;
	margin-top:38px;
	flex: 2 80px 0;
}
.box-con {
	flex: 5;
}
.box-name {
	font-size: 25px;
	margin: 30px 0 0 0;
}
.box-row {
	display: flex;
	font-size: 14px;
	line-height: 30px;
	justify-content: space-between;
	padding-right: 10px;
}
.left {
	width: 80px;
	color: rgb(46,152,148);
	text-align: center;
}
.use {
	width: 80px;
	color: rgb(54,188,225);
	text-align: center;
}
.cancel {
	width: 80px;
	color: rgb(255,174,0);
	text-align: center;
}
.active1 {
	/* background: rgb(224,240,239); */
	border-bottom: 1px solid rgb(46,152,148);;
}
.active2 {
	/* background: rgb(224,240,239); */
	border-bottom: 1px solid rgb(255,174,0);
}
.active3 {
	/* background: rgb(224,240,239); */
	border-bottom: 1px solid rgb(54,188,225);
}
.ico {
	width: 20px;
	height: 20px;
	transform: translateY(10px);
	margin-right: 5px;
	vertical-align:super
}
.lingyong {
	width: 26px;
}
.biaoshi {
	margin-left: 5px;
}
.list {
	margin:20px 10px 0 10px;
	border-radius: 15px;
	background: #FFFFFF;
	height: 68.5%;
	padding: 0 10px;
	overflow-y:auto;
}
.item {
	height: 150px;
	border-bottom: 1px solid #eee;
	padding-top: 20px;
	position: relative;
}
.header {
	font-size: 20px;
	display: flex;
}
.name {
	margin: -3px 0 0 0;
	font-size: 20px;
	flex: 2;
}
.operation {
	flex: 3;
	display: flex;
	justify-content: space-between;
}
.btn {
	width: 60px;
	height: 30px;
	line-height: 30px;
	font-size: 13px;
	text-align: center;
	border-radius: 20px;
	transform: translateY(-10px);
}
.face {
	background: rgb(46,152,148);
	color: #FFFFFF;
	margin:14px 0 0 60px;
}
.all {
	margin: 0;
	margin-top: 14px;
	height: 29px;
	border: 1px solid rgb(46,152,148);
	color: rgb(46,152,148);
}
.item-row {
	display: flex;
	padding-top: 15px;

}
.item-col {
	flex: 1;
	color: #999999;
	font-size: 12px;
}
.checked {
	font-size: 13px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
}
</style>
